<template>
  <div class="relative w-full h-full overflow-y-auto overflow-x-hidden">
    <div class="card w-full">
      <PageHeader :title="$t('basic.待办事项')" />
      <div class="flex_aic gap16 w-full">
        <div
          class="card_item flex1 flex_aic"
          v-for="(item, index) in dataList"
          :key="item.title"
          @click="handleClick(index)"
        >
          <img :src="item.icon" alt="" />
          <div class="ml16">
            <div class="card_item_title">{{ $t(`basic.${item.title}`) }}</div>
            <div class="card_item_count">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex_aic gap-10 w-full">
      <div class="card2 flex1" v-for="item in dataList2" :key="item.name">
        <div class="flex_aic_jcsb">
          <div class="card2-title">{{ $t(`basic.${item.name}`) }}</div>
          <div class="fs-12 card2-time">
            {{ moment().format("YYYY-MM-DD HH:mm:ss") }}
          </div>
        </div>
        <div class="flex card2-datas flex-wrap">
          <div v-for="item2 in item.data" :key="item2.title">
            <div class="flex_aic">
              <span class="mr8">{{ $t(`basic.${item2.title}`) }}</span>
              <el-tooltip :content="$t(`basic.${item2.tips}`)" placement="right">
                <el-icon :size="14" color="rgb(218, 218, 218)"
                  ><WarningFilled
                /></el-icon>
              </el-tooltip>
            </div>
            <div class="card2-data-count">
              <span class="fs-16" v-if="item2.title.includes('金额') || item2.title.includes('Amount')">￥</span>
              <span>{{ item2.count ?? "--" }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex gap-10 flex-wrap">
      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader
            :title="$t('basic.支付下单金额趋势')"
            style="margin-bottom: 0"
          />
          <DatePick v-model:value="dateValue1" @change="getList1" />
        </div>
        <div class="chart_box w-full" id="chart1"></div>
      </div>
      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader
            :title="$t('basic.会员店铺新增趋势')"
            style="margin-bottom: 0"
          />
          <DatePick v-model:value="dateValue2" @change="getList2" />
        </div>
        <div class="chart_box w-full" id="chart2"></div>
      </div>

      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader
            :title="$t('basic.店铺销售排行TOP10')"
            style="margin-bottom: 0"
          />
          <DatePick v-model:value="dateValue3" @change="getList3" />
        </div>
        <div class="p12">
          <el-table
            :data="tableData1"
            style="width: 100%"
            class="cover-table"
            border
            height="458px"
          >
            <el-table-column type="index" :label="$t('basic.序号')" width="80" />
            <el-table-column :prop="'tenantName' + locale" :label="$t('basic.店铺名称')" />
            <el-table-column :prop="'saleAmount'" :label="$t('basic.销售额')" sortable />
            <el-table-column :prop="'saleCount'" :label="$t('basic.订单量')" sortable />
          </el-table>
        </div>
      </div>

      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader
            :title="$t('basic.菜品销售排行TOP10')"
            style="margin-bottom: 0"
          />
          <DatePick v-model:value="dateValue4" @change="getList4" />
        </div>
        <div class="p12">
          <el-table
            :data="tableData2"
            style="width: 100%"
            class="cover-table"
            border
            height="458px"
          >
            <el-table-column type="index" :label="$t('basic.序号')" width="80" />
            <el-table-column :prop="'skuName' + locale" :label="$t('basic.菜品名称')" />
            <el-table-column :prop="'saleAmount'" :label="$t('basic.销售额')" sortable />
            <el-table-column :prop="'saleCount'" :label="$t('basic.订单量')" sortable />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import moment from "moment";
import { WarningFilled } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import Api from "@/config/api/api";
import DatePick from "@/components/datePick.vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";


const VITE_APP_LANG = import.meta.env.VITE_APP_LANG;
console.log(111, VITE_APP_LANG); // 输出：https://api.example.com

const { locale, t } = useI18n();
const router = useRouter();
const dateValue1 = ref([
  moment().subtract(1, "day").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "day").format("YYYY-MM-DD 23:59:59"),
]);

const dateValue2 = ref([
  moment().subtract(1, "day").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "day").format("YYYY-MM-DD 23:59:59"),
]);
const dateValue3 = ref([
  moment().subtract(1, "day").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "day").format("YYYY-MM-DD 23:59:59"),
]);

const dateValue4 = ref([
  moment().subtract(1, "day").format("YYYY-MM-DD 00:00:00"),
  moment().subtract(1, "day").format("YYYY-MM-DD 23:59:59"),
]);
const dataList = ref([
  {
    title: "待审核店铺",
    count: 0,
    icon: new URL(`@/assets/images/basic/icon1.png`, import.meta.url).href,
    path: "/manage_product/sellerManage",
  },
  {
    title: "待审核菜品",
    count: 0,
    icon: new URL(`@/assets/images/basic/icon2.png`, import.meta.url).href,
    path: "/manage_product/goods_list",
  },
  {
    title: "待处理退款单",
    count: 0,
    icon: new URL(`@/assets/images/basic/icon3.png`, import.meta.url).href,
    path: "/manage_product/refund",
  },
  {
    title: "待处理结算单",
    count: 0,
    icon: new URL(`@/assets/images/basic/icon4.png`, import.meta.url).href,
    path: "/manage_product/settlement",
  },
]);

const dataList2 = ref([
  {
    name: "今日交易概况",
    data: [
      {
        title: "下单数",
        count: 0,
        tips: "下单数提示",
      },
      {
        title: "下单金额(元)",
        count: 0,
        tips: "下单金额提示",
      },
      {
        title: "支付订单数",
        count: 0,
        tips: "支付订单数提示",
      },
      {
        title: "支付金额(元)",
        count: 0,
        tips: "支付金额提示",
      },
    ],
  },
  {
    name: "今日菜品概况",
    data: [
      {
        title: "菜品总数",
        count: 0,
        tips: "菜品总数提示",
      },
      {
        title: "新增菜品数",
        count: 0,
        tips: "新增菜品数提示",
      },
      {
        title: "在售菜品数",
        count: 0,
        tips: "在售菜品数提示",
      },
      {
        title: "下架菜品数",
        count: 0,
        tips: "下架菜品数提示",
      },
    ],
  },
  {
    name: "今日用户概况",
    data: [
      {
        title: "店铺总数",
        count: 0,
        tips: "店铺总数提示",
      },
      {
        title: "新增店铺数",
        count: 0,
        tips: "新增店铺数提示",
      },
      {
        title: "会员总数",
        count: 0,
        tips: "会员总数提示",
      },
      {
        title: "新增会员数",
        count: 0,
        tips: "新增会员数提示",
      },
    ],
  },
]);

const tableData1 = ref([]);
const tableData2 = ref([]);

const chart1 = null;
const chart2 = null;

const dateType1 = ref(1)
const dateType2 = ref(1)
const dateType3 = ref(1)
const dateType4 = ref(1)

const initChart = (id, chart, name1, name2, data1, data2) => {
  const chartDom = document.getElementById(id);
  if (chart) chart.clear();
  chart = echarts.init(chartDom);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    legend: {
      data: [name1, name2],
      selectedMode: true,
      selected: {
        [name1]: true,
        [name2]: true,
      },
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#999999",
        },
      },
    },
    series: [
      {
        name: name1,
        type: "line",
        smooth: true,
        data: data1,
        itemStyle: {
          color: "rgba(30,135,240,1)",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(30,135,240,0.9)",
              },
              {
                offset: 1,
                color: "rgba(30,135,240,0.9)",
              },
            ],
          },
        },
      },
      {
        name: name2,
        type: "line",
        smooth: true,
        data: data2,
        itemStyle: {
          color: "rgba(33,195,188,1)",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(33,195,188,0.9)",
              },
              {
                offset: 1,
                color: "rgba(33,195,188,0.9)",
              },
            ],
          },
        },
      },
    ],
  };

  option && chart.setOption(option);
};

const getData = () => {
  Api.report_todo().then((res) => {
    if (res.status === 200) {
      dataList.value[0].count = res.data.todo.toCheckTenant;
      dataList.value[1].count = res.data.todo.toCheckSku;
      dataList.value[2].count = res.data.todo.toCheckSale;
      dataList.value[3].count = res.data.todo.toCheckSettlement;
    }
  });

  Api.report_todaySale({}).then((res) => {
    if (res.status === 200) {
      dataList2.value[0].data[0].count = res.data.todaySale.saleCount;
      dataList2.value[0].data[1].count = res.data.todaySale.saleAmount;
      dataList2.value[0].data[2].count = res.data.todaySale.payCount;
      dataList2.value[0].data[3].count = res.data.todaySale.payAmount;
    }
  });

  Api.report_todaySku({}).then((res) => {
    if (res.status === 200) {
      dataList2.value[1].data[0].count = res.data.todaySku.skuTotal;
      dataList2.value[1].data[1].count = res.data.todaySku.addSkuCount;
      dataList2.value[1].data[2].count = res.data.todaySku.onSaleCount;
      dataList2.value[1].data[3].count = res.data.todaySku.downSkuCount;
    }
  });

  Api.report_todayUser({}).then((res) => {
    if (res.status === 200) {
      dataList2.value[2].data[0].count = res.data.todayUser.tenantTotal;
      dataList2.value[2].data[1].count = res.data.todayUser.addTenantCount;
      dataList2.value[2].data[2].count = res.data.todayUser.vipTotal;
      dataList2.value[2].data[3].count = res.data.todayUser.addVipCount;
    }
  });
};

const getList1 = (value, type) => {
  dateType1.value = type
  Api.report_saleTrend({
    type,
    startDate: value[0],
    endDate: value[1],
  }).then((res) => {
    if (res.status === 200) {
      chart1?.clear();
      initChart(
        "chart1",
        chart1,
        t('basic.下单金额趋势'),
        t('basic.支付金额趋势'),
        res.data.map((v) => [v.time, v.saleAmount]),
        res.data.map((v) => [v.time, v.salePayAmount])
      );
    }
  });
};

const getList2 = (value, type) => {
  dateType2.value = type
  Api.report_vipAndTenantTrend({
    type,
    startDate: value[0],
    endDate: value[1],
  }).then((res) => {
    if (res.status === 200) {
      chart2?.clear();
      initChart(
        "chart2",
        chart2,
        t('basic.新增会员数趋势'),
        t('basic.新增店铺数趋势'),
        res.data.map((v) => [v.time, v.vipCount]),
        res.data.map((v) => [v.time, v.tenantCount])
      );
    }
  });
};

const getList3 = (value, type) => {
  dateType3.value = type

  Api.report_tenantSaleTop10({
    type,
    startDate: value[0],
    endDate: value[1],
  }).then((res) => {
    tableData1.value = res.data;
  });
};

const getList4 = (value, type) => {
  dateType4.value = type

  Api.report_skuSaleTop10({
    type,
    startDate: value[0],
    endDate: value[1],
  }).then((res) => {
    tableData2.value = res.data;
  });
};

const handleClick = (index) => {
  if (index === 0) {
    router.push("/manage_product/merchantApplication");
  } else if (index === 1) {
    router.push({
      path: "/manage_product/goods_list",
      query: {
        type: "0",
      },
    });
  } else if (index === 2) {
    router.push("/manage_product/service");
  } else if (index === 3) {
    router.push("/manage_product/settlementBill");
  }
};

onMounted(() => {
  getData();
  getList1(dateValue1.value, dateType1.value);
  getList2(dateValue2.value, dateType2.value);
  getList3(dateValue3.value, dateType3.value);
  getList4(dateValue4.value, dateType4.value);
});

watch(()=>locale.value, ()=>{
  getData();
  getList1(dateValue1.value, dateType1.value);
  getList2(dateValue2.value, dateType2.value);
  getList3(dateValue3.value, dateType3.value);
  getList4(dateValue4.value, dateType4.value);
})
</script>

<style scoped lang="scss">
.card {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 4px;

  .card_item {
    height: 130px;
    margin-top: 20px;
    margin-bottom: 19px;
    background-color: #fff;
    box-shadow: 0 2px 22px #00000008;
    cursor: pointer;
    padding-left: 30px;
    .card_item_title {
      opacity: 0.72;
      color: #333;
      font-size: 15px;
    }
    .card_item_count {
      margin-top: 9px;
      color: #333;
      font-size: 26px;
      font-weight: 700;
      line-height: 26px;
    }
  }
}

.card2 {
  position: relative;
  height: 301px;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
  .card2-title {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: -5px;
    width: 163px;
    height: 37px;
    padding-top: 11px;
    padding-left: 16px;
    background-size: 100%;
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    background-image: url("@/assets/images/basic/titleBg.png");
  }
  .card2-time {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 25px;
    color: #1890ff;
  }
  .card2-datas {
    margin-top: 90px;
    padding-left: 95px;
    > div {
      width: calc((100% - 95px) / 2);
      height: 103px;
    }
    .card2-data-count {
      margin-top: 13px;
      color: #333;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
        PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
        Helvetica, Arial, sans-serif;
      font-size: 28px;
      letter-spacing: -2px;
      line-height: 28px;
    }
  }
}

.chart_box {
  height: 458px;
  margin-top: 30px;
}

.card3 {
  background-color: #ffffff;
  border-radius: 4px;
  .card3-header {
    height: 48px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
  }
}
</style>
